<template>
  <!-- 增值服务 - 静态页面 -->
  <div class="static-wrapper invoice-wrapper">
    <header class="static-header">
      <h3 class="title">增值服务 - {{name}}</h3>
      <i class="return-icon" @click="returnBack"></i>
    </header>
    <section class="static-status-info">
      <div class="status-info-box">
        <div class="info-list">
          <h3 class="status-icon success" v-if="parkingList.length > 0">
            <i class="el-icon-success s-icon"></i>
            <span class="nowrap">已开通</span>
          </h3>
          <h3 class="status-icon info" v-else>
            <i class="el-icon-warning s-icon"></i>
            <span>未开通</span>
          </h3>
          <!-- <span class="info-list-item" v-if="parkingList.length > 0">（已开通车场：<span v-for="(item, index) in parkingList" :key="index">{{item}}</span>）</span> -->
          <span
            class="info-list-item"
            v-if="parkingList.length > 0"
            :title="allParkingListStr"
          >{{openedParkingNames}}</span>
          <span
            class="info-list-item"
            v-if="expiredParksList.length > 0"
            :title="expiredParksListStr"
          >{{expiredParkingNames}}</span>
        </div>
        <p
          class="info-list-item"
        >申请须知：1.开通资料 &nbsp;2.填写公司提供的申请资料的格式 &nbsp;3.把资料以邮件的形式发送到： market@akeparking.cn</p>
      </div>
      <el-button type="primary" size="medium" @click="downloadTemp">下载邮件模板</el-button>
    </section>

    <section class="static-note-wrapper" v-if="name === '线上支付'">
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">开通后可使用微信、支付宝、微信无感、支付宝无感等线上支付功能。</p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-group-wrapper">
          <div class="note-img-group">
            <h4 class="group-title">微信支付截图</h4>
            <div class="note-img-box">
              <img src="../../assets/img/img/payment1.png" alt class="img w420" />
            </div>
          </div>
          <div class="note-img-group mr0">
            <h4 class="group-title">支付宝支付截图</h4>
            <div class="note-img-box">
              <img src="../../assets/img/img/payment2.png" alt class="img w420" />
            </div>
          </div>
          <div class="note-img-group mr0">
            <h4 class="group-title">支付宝无感支付开通流程</h4>
            <div class="note-img-box">
              <img src="../../assets/img/img/payment3.png" alt class="img big-img" />
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="static-note-wrapper" v-if="name === '电子优惠券'">
      <div class="note-group" v-if="parkingList.length > 0">
        <h4 class="note-title">开通功能</h4>
        <div class="note-info">
          <el-checkbox
            v-model="onlineSaleStatus"
            :true-label="1"
            :false-label="0"
            @change="switchCouponBtnStatus"
          >支持优惠券线上购买</el-checkbox>
        </div>
      </div>
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">车场管理方向商户售卖优惠券，商户发放给车主，可用于抵扣停车费。</p>
        <p class="note-info mt30">支持以下优惠方式：</p>
        <p class="note-info">免费券：当次停车免费。</p>
        <p class="note-info">金额扣减券：减免一定金额的停车费（优惠5元）。</p>
        <p class="note-info">金额折扣券：减免一定折扣的停车费（停车9折）。</p>
        <p class="note-info">金额固定值券：固定收费（1分钟停车）。</p>
        <p class="note-info">时间券：减免停车时间（免费停车3小时）。</p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-img-box">
          <img class="img" src="../../assets/img/img/coupon.png" alt />
        </div>
      </div>
    </section>

    <section class="static-note-wrapper" v-else-if="name === '电子发票'">
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">车主支付停车费后，可自助申请开具电子发票。</p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-img-box">
          <img class="img" src="../../assets/img/img/invoice.png" alt />
        </div>
      </div>
    </section>

    <section class="static-note-wrapper" v-else-if="name === '活动优惠'">
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">用于停车场线上支付活动，车场可配置特定适用支付渠道和适用对象。</p>
        <p class="note-info mt30">常用场景：</p>
        <p class="note-info">线上支付（全场7折）</p>
        <p class="note-info">特定人群优惠码，适用于指定人群（白名单/车牌）</p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-img-box">
          <img class="img" src="../../assets/img/img/activity.png" alt />
        </div>
      </div>
    </section>

    <section class="static-note-wrapper" v-else-if="name === '中央值守'">
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">集中值守多停车场多通道，监控现场情况，并对异常情况进行及时处理。减少岗亭收费人员，实现车场降本增效。</p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-img-box">
          <img class="img big-img" src="../../assets/img/img/centerCharge.png" alt />
        </div>
      </div>
    </section>

    <section class="static-note-wrapper" v-else-if="name === '移动盘点'">
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">使用POS机对停车场在场记录进行盘点。</p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-img-box">
          <img class="img" src="../../assets/img/img/mobileStock.png" alt />
        </div>
      </div>
    </section>

    <section class="static-note-wrapper" v-else-if="name === '车场积分对接'">
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">可接入车场会员积分系统，对接后可使用车场积分抵扣停车费。注意：需进行会员积分系统对接。</p>
        <p class="note-info">
          对接指引：
          <a href="http://openydt.yidianting.xin/#/Api" class="imgLink" target="_blank">开放平台</a>
        </p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-img-box">
          <img class="img" src="../../assets/img/img/points.png" alt />
        </div>
      </div>
    </section>

    <section class="static-note-wrapper" v-else-if="name === '优惠抵扣对接'">
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">可接入第三方优惠券，对接后可进行停车费的优惠抵扣。</p>
        <p class="note-info">
          对接指引：
          <a href="http://openydt.yidianting.xin/#/Api" class="imgLink" target="_blank">开放平台</a>
        </p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-img-box">
          <img class="img" src="../../assets/img/img/preferential.png" alt />
        </div>
      </div>
    </section>

    <section class="static-note-wrapper" v-else-if="name === '反向寻车'">
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">开通后车主可通过手机进行反向寻车。</p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-img-box">
          <img class="img" src="../../assets/img/img/carSearch.png" alt />
        </div>
      </div>
    </section>

    <section class="static-note-wrapper" v-else-if="name === '车位预订'">
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">车场配置部分车位开放预订，车主可在手机预订。</p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-img-box">
          <img class="img" src="../../assets/img/img/booking.png" alt />
        </div>
      </div>
    </section>

    <section class="static-note-wrapper" v-else-if="name === '车位共享'">
      <div class="note-group">
        <h4 class="note-title">简介</h4>
        <p class="note-info">在手机进行车位共享（分时租赁）或预订共享车位。</p>
      </div>
      <div class="note-group">
        <h4 class="note-title">服务截图</h4>
        <div class="note-img-box">
          <img class="img" src="../../assets/img/img/sharing.png" alt />
        </div>
      </div>
    </section>
  </div>
</template>

<script>
import utils from "@mixins/utils.js";
import { deepCopyObjArray } from "../../assets/js/help";

export default {
  name: "staticPage",
  mixins: [utils],
  data() {
    return {
      name: "",
      parkingList: [],
      allParkingListStr: "",
      onlineSaleStatus_old: "",
      onlineSaleStatus: "",
      expiredParksList: [], //已过期停车场列表
      expiredParksListStr: ""
    };
  },

  created() {
    let _params = this.$route.params;
    this.name = _params.name;
    this.parkingList = _params.list;
    this.serviceType = _params.serviceType;
    this.getTraderCouponOnlineSaleStatus();
    this.getExpiredParksList();
  },

  computed: {
    openedParkingNames() {
      let str = "";
      let allStr = "";
      let parkingList = JSON.parse(JSON.stringify(this.parkingList));
      let len = parkingList.length;
      if (len > 0) {
        str = "（已开通车场：";
        allStr = "（已开通车场：";
        allStr += parkingList.join(" / ");
        allStr += "）";
        if (len > 5) {
          str += parkingList.slice(0, 5).join(" / ");
          str += " ......）";
        } else {
          str = allStr;
        }
      }
      this.allParkingListStr = allStr;
      return str;
    },
    expiredParkingNames() {
      let str = "";
      let allStr = "";
      let parkingList = JSON.parse(JSON.stringify(this.expiredParksList));
      let len = parkingList.length;
      if (len > 0) {
        str = "（已过期车场：";
        allStr = "（已过期车场：";
        allStr += parkingList.join(" / ");
        allStr += "）";
        if (len > 3) {
          str += parkingList.slice(0, 3).join(" / ");
          str += " ......）";
        } else {
          str = allStr;
        }
      }
      this.expiredParksListStr = allStr;
      return str;
    }
  },

  methods: {
    returnBack() {
      this.$router.go(-1);
    },
    downloadTemp() {
      const aLink = document.createElement("a");
      aLink.setAttribute("download", "");
      aLink.setAttribute("href", "/static/file/开通功能模板（标准）.docx");
      aLink.click();
    },
    // 获取已过期停车场列表
    getExpiredParksList() {
      let self = this;
      let params = {
        serviceType: self.serviceType
      };
      API.fetchGet("/valueAdded/getValueAddedExpiredParks", params).then(
        res => {
          if (Array.isArray(res.data) && res.data.length) {
            self.expiredParksList = deepCopyObjArray(res.data);
          }
        },
        err => {}
      );
    },
    // 获取当前帐号的线上购买的开关状态
    getTraderCouponOnlineSaleStatus() {
      let self = this;
      API.fetchGet("/trader/getTraderCouponOnlineSaleStatus.do", {}).then(
        res => {
          if (res.status == 1) {
            self.onlineSaleStatus = res.data;
            self.onlineSaleStatus_old = res.data;
          }
        },
        err => {}
      );
    },
    //更新线上购买优惠券开关
    switchCouponBtnStatus(val) {
      let self = this,
        params = {
          isTraderCouponPay: val
        };
      let info = val
        ? "是否确认开启优惠券线上购买功能?"
        : "是否确认关闭优惠券线上购买功能?";
      let title = val ? "开启" : "关闭";
      let tipText = val ? "" : "";
      this.showDialog(
        info,
        ["确 认", "取 消"],
        function() {
          API.fetchGet(
            "coupon/updateTraderCouponOnlineSaleStatus.do",
            params
          ).then(
            res => {
              if (res.status == 1) {
                self.onlineSaleStatus_old = val;
                self.sendMessageToUpdateOnlineSaleStatus(val);
                if (val) {
                  self.showToast("功能已开启！", 1, 1500);
                } else {
                  self.showToast("功能已关闭！", 1, 1500);
                }
              }
            },
            err => {}
          );
        },
        title,
        function() {
          self.onlineSaleStatus = self.onlineSaleStatus_old;
        },
        tipText
      );
    },
    sendMessageToUpdateOnlineSaleStatus(msg) {
      localStorage.setItem("onlineSaleStatus_set", JSON.stringify(msg));
      localStorage.removeItem("onlineSaleStatus_set");
    }
  }
};
</script>

<style lang="less" scoped>
@import "./style/staticPage.less";
</style>
